.flex {
    display: flex;
}
/* flex横向布局 */
.flex-row {
    display: flex;
    flex-direction: row;
}
/* flex横向布局 底部对齐 */
.flex-row-align-end {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}
/* flex纵向布局 */
.flex-column {
    display: flex;
    flex-direction: column;
}
/* 水平两端分布 */
.flex-row-space-between {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
/* 平均分布 */
.flex-row-space-around {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.flex-column-space-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
/* 靠近结束分布 */
.flex-row-end {
    display: flex;
    flex-direction: row;
    justify-content: end;
}
/* 水平居中 */
.flex-row-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
/* 水平线对其 */
.flex-row-align {
    display: flex;
    flex-direction: row;
    align-items: center;
}
/* 垂直居中 */
.flex-column-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* 垂直水平居中  */
.flex-position-center {
    display: flex;
    place-content: normal center;
    align-items: center;
}
.flex-1 {
    flex: 1;
}
.flex-basis-5 {
    flex-basis: 5%;
}
.flex-basis-10 {
    flex-basis: 10%;
}
.flex-basis-20 {
    flex-basis: 20%;
}
.flex-basis-30 {
    flex-basis: 30%;
}
.flex-basis-40 {
    flex-basis: 40%;
}
.flex-basis-50 {
    flex-basis: 50%;
}
.flex-basis-60 {
    flex-basis: 60%;
}
.flex-basis-70 {
    flex-basis: 70%;
}
.flex-basis-80 {
    flex-basis: 80%;
}
.flex-basis-90 {
    flex-basis: 90%;
}
.flex-basis-15 {
    flex-basis: 15%;
}
.flex-basis-25 {
    flex-basis: 25%;
}
.flex-basis-35 {
    flex-basis: 35%;
}
.flex-basis-45 {
    flex-basis: 45%;
}
.flex-basis-55 {
    flex-basis: 55%;
}
.flex-basis-65 {
    flex-basis: 65%;
}
.flex-basis-75 {
    flex-basis: 75%;
}
.flex-basis-85 {
    flex-basis: 85%;
}
.flex-basis-95 {
    flex-basis: 95%;
}
